<template>
  <div class="header">
    <!--<div class="logo" :class="{fold_logo: foldAsideNav}">{{foldAsideNav ? "易联众" : "数据与服务管控平台"}}</div>-->
    <!--<i class="fa fa-dedent" :class="{'fa-indent': foldAsideNav}" @click="handleFoldNav"></i>-->
    <img class="logo" src="../static/img/logo.png" alt="">
    <div class="user-info">
      <!--<div class="message"><span>6</span></div>-->
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="user-logo" src="../static/img/img.jpg">{{username}}
          <i class="fa fa-angle-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info">基本信息</el-dropdown-item>
          <el-dropdown-item command="loginout">退出账号</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  export default {
    computed: {
      username() {
        var str = localStorage.getItem("user");
        var user = JSON.parse(str);
        return user.name
      },
      foldAsideNav () {
      	return this.$store.state.foldAsideNav;
      }
    },
    methods: {
      handleCommand(command) {
      	if (command === "info") {
          this.$router.push("/account");
        } else if (command === "loginout") {
          localStorage.removeItem("userCode");
          this.$router.push("/login");
        }
      },
      handleFoldNav () {
        this.$store.dispatch("foldAsideNav");
      }
    }
  }
</script>
<style scoped lang="scss">
  .header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 88px;
    line-height: 88px;
    color: #fff;
    z-index: 10001;
    background-color: #426374
  }
  .header .logo {
    padding-left: 10px;
    margin-top: 14px;

  }

  .user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
    color: #fff;
  }

  .el-dropdown {
    font-size: 16px;
  }

  .user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
  }

  .user-info .user-logo {
    position: absolute;
    left: 0;
    top: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-dropdown-menu__item {
    text-align: center;
  }

  .fa-dedent {
    cursor: pointer;
  }

  /*.message {*/
    /*display: inline-block;*/
    /*width: 26px;*/
    /*height: 64px;*/
    /*background: url("../static/img/message_icon.png") no-repeat center;*/
    /*margin-right: 30px;*/
    /*position: relative;*/
    /*vertical-align: middle;*/
    /*cursor: pointer;*/

    /*span {*/
      /*position: absolute;*/
      /*top: 10px;*/
      /*right: -12px;*/
      /*min-width: 15px;*/
      /*height: 15px;*/
      /*line-height: 15px;*/
      /*border-radius: 50%;*/
      /*padding: 3px;*/
      /*background-color: #f86a69;*/
      /*color: #fff;*/
      /*font-size: 12px;*/
      /*text-align: center;*/
    /*}*/
  /*}*/
</style>
